<template>
	<view class="content">
		<view class="backGround"
			:style="{background: `url(${imgaeUrl('/static/bg.png')})`}">
			<view v-bind:style="{height: (s+n) +'px'}" class="position-fixed width-100"
				style="top: 0; overflow: hidden; z-index: 9999;">
				<view class="backGround"
					:style="{background: `url(${imgaeUrl('/static/bg.png')})`}">
					<view v-bind:style="{height: s+'px' }" />
					<view v-bind:style="{height: n+'px' }" class="display-flex center align-items">
						<view v-bind:style="{height: h+'px' }" style="width: 690rpx;"
							class=" display-flex space-between align-items">
							<view @click="navigateBack()" class="margin-top-05">
								<uv-icon name="arrow-left" color="#333333" size="20"></uv-icon>
							</view>
							<view class="font-size-32 font-weight-500">
								收益明细
							</view>
							<view style="width: 20px;" class="margin-top-05">

							</view>
						</view>
					</view>
				</view>
			</view>
			<view :style="{height: (s+n) +'px'}">
			</view>
			<view class="padding-about-24 margin-top-20">
				<view class="balance-section" :style="{background: `url(${imgaeUrl('/static/home/tdbg.png')})`}">
					<view style="padding-top: 50rpx;" class="display-flex flex-direction-column  center align-items">
						<view class="font-size-22 color-FFF">
							账户余额
						</view>
						<text class=" font-size-54 color-FFF font-weight-bold">{{info.user_money}}</text>
					</view>
					<view style="padding:0 48rpx;" class="display-flex margin-top-20 space-between ">
						<view style="padding-top: 50rpx;"
							class="display-flex flex-direction-column  center align-items">
							<text class=" font-size-36 color-FFF font-weight-bold">{{info.settle_money}}</text>
							<view class="font-size-24 color-FFF">
								已结算 (元)
							</view>
						</view>

						<view style="padding-top: 50rpx;"
							class="display-flex flex-direction-column  center align-items">
							<text class=" font-size-36 color-FFF font-weight-bold">{{info.noSettle_money}}</text>
							<view class="font-size-24 color-FFF">
								待结算 (元)
							</view>
						</view>
					</view>
				</view>

				<view class="">
					<uv-tabs :list="tabslist" @click="swiperTabs" lineWidth="15"
						lineColor="linear-gradient( 270deg, #FE6740 0%, #FE8B1D 100%)" :activeStyle="{
													color: '#262626',
													fontWeight: '500',
													transform: 'scale(1.05)',
													fontSize:'24rpx'
										    	}" :inactiveStyle="{
													color: '#7C7C7C',
													transform: 'scale(1)',
													fontSize:'24rpx'
												}" itemStyle="width:42%;height: 34px;"></uv-tabs>
				</view>
				<view class="">
					<view v-if="list.length == 0"
						class="display-flex flex-direction-column center align-items margin-top-120">
						<image :src="imgaeUrl('/static/home/kong.png')" style="width: 232rpx;height: 232rpx;" mode="widthFix">
						</image>
						<view class="font-size-28 margin-top-05 color-999">
							暂无{{activeIndex == 0?'收益':'提现'}}明细哦~
						</view>
					</view>
					<view v-if="activeIndex == 0" v-for="item,index in list" :key="index"
						class="view margin-top-20 display-flex space-between ">
						<view class="">
							<view class="font-size-28 font-weight-500">
								{{item.desc}}
							</view>
							<view class="font-size-24 color-999">
								{{item.create_time}}
							</view>
						</view>
						<view class="">
							<view class="font-size-36  font-weight-bold">
								{{item.money}}
							</view>
							<view class="font-size-22 text-right color-999">
								{{item.type_text}}
							</view>
						</view>
					</view>
					<view v-if="activeIndex == 1" v-for="item,index in list" :key="index"
						class="view margin-top-20 display-flex space-between " 
						@click="navigateTo('/pages/Mine/Withdrawal/Info?id='+item.id)">
						<view class="">
							<view v-if="item.fail_msg" class="font-size-28 font-weight-500">
								失败原因：{{item.fail_msg}}
							</view>

							<view class="font-size-28 font-weight-500">
								提现状态：{{item.status_text}}
							</view>
							<view class="font-size-24 color-999">
								{{item.create_time}}
							</view>
						</view>
						<view class="">
							<view class="font-size-28 font-weight-500">
								提现金额：{{item.money}}
							</view>
							<view class="font-size-28 font-weight-500">
								到账金额：{{item.result_money}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<div class="kong"></div>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		imgaeUrl,
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	const s = ref(getApp().globalData.s); //计算高度
	const n = ref(getApp().globalData.n); //计算胶囊
	const h = ref(getApp().globalData.h); //计算胶囊
	const tabslist = ref([{
		name: '收益明细'
	}, {
		name: '提现记录',
	}])
	const info = ref({})
	const pagingState = ref(false)
	const page = ref(1)
	const list = ref([]) //热门视频
	const activeIndex = ref(0)
	onLoad(function(option) {
		getWithdrawalData()
		moneyLog()
	});
	onShow(function() {});

	function swiperTabs(e) {
		pagingState.value = false
		page.value = 1
		list.value = []
		activeIndex.value = e.index
		if (e.index == 0) {
			moneyLog()
		} else {
			withdrawalLog()
		}
	}
	async function getWithdrawalData() {
		const {
			code,
			data
		} = await api.getWithdrawalData()
		if (code == 0) {
			info.value = data
		}
	}

	/** 获取提现*/
	async function withdrawalLog() {
		let object = {
			page: page.value,
		}
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.withdrawalLog(object)
			list.value = list.value.concat(data.data)
			if (!data.has_more) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	/** 获取收益*/
	async function moneyLog() {
		let object = {
			page: page.value,
		}
		if (!pagingState.value) {
			const {
				code,
				data
			} = await api.moneyLog(object)
			list.value = list.value.concat(data.data)
			if (!data.has_more) {
				pagingState.value = true
				return
			}
			page.value++
		}
	}
	onReady(function() {});
	onReachBottom(function() {
		console.log(1);
		if (activeIndex.value == 0) {
			moneyLog()
		} else {
			withdrawalLog()
		}
	});
</script>

<style scoped lang="scss">
	.label {
		width: 90rpx;
		height: 32rpx;
		background: #FFEEEA;
		border-radius: 16rpx;
	}

	.balance-section {
		width: 702rpx;
		height: 340rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}

	.view {
		padding: 24rpx;
		background: #FFFFFF;
		// box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.backGround {
		width: 750rpx;
		height: 452rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat;
	}
</style>